<template>
	<view class="">
		<u-navbar :border-bottom="false" :title="navTitle" :title-size="36" :title-bold="true" :title-color="textColor" :background="{background: '#fff'}"></u-navbar>
		<view class="shop-header">
			<image src="/static/logo.png" mode="" class="shop-logo"></image>
			<view class="shop-name u-text-center">
				{{ownerName}}
			</view>
		</view>
		
		<view class="">
			<view class="u-p-20 u-m-t-20 u-font-32" style="background-color: #fff;font-weight: 500;">
				客户可用支付方式（多选）
			</view>
			<view class="u-p-l-35 u-p-r-35" style="background-color: #fff;" >
				<u-checkbox-group @change="checkboxGroupChange" v-model="allowCollections" :wrap="true" :size="40" :icon-size="20" :label-disabled="false" shape="circle" :active-color="themeColor" >
					<view class="u-flex u-row-between u-p-t-40 u-p-b-40 check-item" style="width: 100%;" v-for="(item, index) in methodList" :key="index" >
						<view class="" style="flex:1">
							{{item.name}}
						</view>
						<u-checkbox
						v-model="item.isCheck"
							:name="item.id"
							class="choose-radio"
						>
						</u-checkbox>
					</view>
				
				</u-checkbox-group>
			</view>
			<view class="u-p-20 u-m-t-20 u-font-32" style="background-color: #fff;font-weight: 500;">
				客户可用结算方式（单选）
			</view>
			<view class="u-p-l-35 u-p-r-35" style="background-color: #fff;" >
				<u-radio-group v-model="chooseSettlementMethod" :wrap="true" style="width: 100%;" :size="40" :icon-size="20" :label-disabled="false" shape="circle" :active-color="themeColor" >
					<view class="u-flex u-row-between u-p-t-40 u-p-b-40 check-item" style="width: 100%;" v-for="(item, index) in SettlementMethodList" :key="index" >
						<view class="" style="flex:1">
							{{item.name}}
						</view>
						<u-radio
							:name="item.id"
							class="choose-radio"
						>
						</u-radio>
					</view>
				
				</u-radio-group>
			</view>
			<view v-if="chooseSettlementMethod==1" class="u-p-20 u-m-t-20 u-p-t-40 u-p-b-40 u-font-32 u-p-l-35 u-p-r-35 u-flex u-col-center" style="background-color: #fff;">
				<view class="">
					赊账额度
				</view>
				<u-input v-model="authorizationLimit" class="u-m-l-30" placeholder="请输入最大赊账" :type="'number'" />
				<view class="">
					元
				</view>
			</view>
			
			<view class="u-p-20 u-m-t-20 u-p-t-40 u-p-b-40 u-font-32 u-p-l-35 u-p-r-35 " style="background-color: #fff;" v-if="routeType!=='sale'">
				<view class="u-flex u-col-center u-row-between  u-p-b-35">
					<view class="">
						同意本品牌商代签约
					</view>
					<u-switch v-model="allowRecommend"  active-color="#FFBB1A" inactive-color="#ccc"></u-switch>
				</view>
				<view class="u-font-26" style="color:#999;">
					开启同意代签约后，本品牌商“中浦耐杯”的销售人员将可以按照上述条款代本公司签约新客户。新签约的客户只开启品牌商指定的商品列表。如需增加商品，可以在合约管理里继续添加。
				</view>
			</view>
		</view>
		
		<view class="apply-btn-container u-m-b-40">
			<u-button class="apply-btn" @click="applySubmit">确定</u-button>
		</view>
		<akLoading isFullScreen :active="loading"></akLoading>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				allowCollections:[],
				levelShow:false,
				methodList:[
					
				],
				SettlementMethodList:[
					{
						name:"先款后货",
						id:0,						
					},
					{
						name:"先货后款",
						id:1,
					},
					
				],
				chooseSettlementMethod:0,
				allowRecommend:false,
				authorizationLimit:'',
				ownerName:'',
				ownerId:'',
				shopId:'',
				navTitle:'签约授权',
				routeType:'',
				loading:false,
			}
		},
		onLoad(options){
			this.ownerName = options.ownerName;
			this.ownerId = options.ownerId;
			this.shopId = options.shopId;
			console.log(options);
			this.routeType = options.type;
			this.getSellerMethodList();
			if(options.type === 'sale'){
				this.navTitle = '设置收款方式';
				this.chooseSettlementMethod=options.settlementMethod;
				this.authorizationLimit=options.maximumDebtAmount;
				this.allowCollections=JSON.parse(options.shopCollectionIds);
			}else{
				this.getSellerAuthList();
			}
		},
		methods:{
			levelChooseFn(val){
			},
			checkboxGroupChange(val){
				this.allowCollections= val;
			},
			
			
			async getSellerMethodList(){
				this.loading = true;
				let params = {
					shopId:this.shopId
				}
				const res = await this.$setHttp.get('api/Shop/GetShopCollections', {header:{shopId:this.shopId}, params: params });
				this.loading = false;
				console.log(res); 
				if(res.code == 200){
					if(this.routeType ==='sale'){  
						res.data.shopCollections.forEach(item=>{  
							if(this.allowCollections.indexOf(item.id)!== -1){
								item.isCheck = true;
							}
						})
						this.methodList = res.data.shopCollections;
					}else{
						this.methodList = res.data.shopCollections;
					}
				}
				
			},
			async getSellerAuthList(){
				let params = {
					brandOwnerId:this.ownerId
				}
				const res = await this.$setHttp.get('api/Shop/v2/GetAgencySignDetails', {header:{shopId:this.shopId}, params: params });
				console.log(res);
				if(res.code == 200){
					let ary = [];
					res.data.allowCollections.forEach((item,index)=>{
						if(item.enabled){
							ary.push(item.id);
							this.methodList[index].isCheck = true;
						}
					});
					this.allowCollections = ary;
					this.allowRecommend = res.data.allowRecommend;
					this.chooseSettlementMethod = res.data.authorizationSettlementMethod||0;
					this.authorizationLimit = res.data.authorizationLimit||0;
				}
				
			},
			
			async applySubmit(){
				
				if(this.allowCollections.length === 0){
					this.$u.toast('收款方式不得为空');
					return false;
				}
				
				if(this.routeType !== 'sale'){
					let params = {
						"brandOwnerId": this.ownerId,
						 "allowRecommend": this.allowRecommend,
						 detail:{
							 authorizationSettlementMethod:this.chooseSettlementMethod,
							 authorizationLimit:this.authorizationLimit,
							 allowCollections:this.allowCollections,
						 }
					}
					this.loading = true;
					const res = await this.$setHttp.post('api/Shop/v2/SetAllowRecommend',params,{header:{shopId:this.shopId}});
					this.loading = false;
					if(res.code === 200){
						this.$u.toast('设置成功');
						this.$mHelper.delayedJump();
					}else{
						this.$u.toast('设置失败，错误信息：'+res.erroMessage)
					}
				}else{
					// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
					let pages = getCurrentPages() 
					
					// 2. 上一页面实例
						// 注意是length长度，所以要想得到上一页面的实例需要 -2
						// 若要返回上上页面的实例就 -3，以此类推
					let prevPage = pages[pages.length -2] 
					
					let list = {
						settlementMethod:this.chooseSettlementMethod,
						maximumDebtAmount:this.authorizationLimit,
						shopCollectionIds:this.allowCollections,
					}
					// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
					prevPage.$vm.getValue(list) 
					
					// 4. 返回上一页面
					uni.navigateBack({
					    delta: 1 // 返回的页面数
					})
				}
				
			},
		}
	}
</script>

<style lang="scss">
	.shop-header{
		background: #fff;
		overflow: hidden;
		margin-bottom: 20rpx;
		.shop-logo{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin: 48rpx auto 30rpx;
			display:block;
		}
		.shop-name{
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 60rpx;
		}
		
	}
	.check-item{
		border-bottom:1px solid #E5E5E5;
		&:nth-last-of-type(1){
			border: none;
		}
		.choose-radio{
			flex: 0 0 50rpx !important;
			width: 50rpx !important;
		}
	}
		
	.apply-btn-container{
		// position: fixed;
		// bottom: 100rpx;
		width: 100%;		
		margin-top: 30rpx;
		z-index: 999;
		display: block;
		.apply-btn{
			width: 80%;
			height: 90rpx;
			background: linear-gradient(-90deg, #FFBB1A, #FFBB1A);
			border-radius: 45rpx;
			&::after{
				border: none;
			}
		}
	}
	
</style>
